<script setup lang="ts">
import { reactive, ref } from "vue";
import { adminListApi, adminQueryApi, adminEditApi,adminDelApi,signUpApi,adminUpdataApi} from '../apis/loginApi'
import { rolecont } from '../apis/roleconter'
import { UserFilled, Lock, User, Phone, Message } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus';
import 'element-plus/theme-chalk/el-loading.css';
import 'element-plus/theme-chalk/el-message.css';
import { menuStore } from '../stores/Menu';
//接口
interface AdminInfo {
    id: number
    username: string
    phone: string
    createTime: string
}
//声明变量
const store = menuStore();
const adminInfo = ref('')
const currentPage4 = ref(1)
const pageSize4 = ref(5)
const input4 = ref('');
const input5 = ref('');
const URL = ref('https://xqq-1319219555.cos.ap-chengdu.myqcloud.com/hospital%2F32401689399578696.png')
const input6 = ref('');
const username = ref('')
const input7 = ref('');
const input8 = ref('');
const input9 = ref(0);
const add1 = ref('');
const add2 = ref('');
const add3 = ref('');
const add4 = ref('');
const add5 = ref('');
const add6 = ref('');
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
const dialogTableVisible = ref(false)
const dialogVisible = ref(false)
const dialogVisible2 = ref(false)
let AdminData: AdminInfo[] = reactive([]);
const handleLogin = (username) => {
    store.pullUsername(username)
}
//声明方法
const multipleSelection = ref<AdminInfo[]>([])
const handleSelectionChange = (val: AdminInfo[]) => {
    multipleSelection.value = val
    console.log(val);
    let arr = []
    val.forEach(v => {
    });
}
const handleSizeChange = (val: number) => {
    pageSize4.value = val;
    console.log(`每页${val} 条`)
}
const handleCurrentChange = (val: number) => {
    currentPage4.value = val
    console.log(`当前页: ${val}`)
}
const render = async () => {
    const { data }: { [propsName: string]: any } = await adminListApi()
    if (data.code == 0) {
        AdminData.length
        AdminData.push(...data.data)
        store.$state.username.length=0
        data.data.forEach((v)=>{
            handleLogin(v.username)
        })
        
    }else if(data.msg){
        ElMessage({
            type: 'error',
            message: data.msg
        })
    }
}
const adminSeach = async () => {
    const { data }: { [propsName: string]: any } = await adminQueryApi({ username: adminInfo.value })
    if (data.code == 0) {
        AdminData.length=0
        AdminData.push(...data.data)
    }
}
const editadmin = (val) => {
    dialogVisible.value = true
    input4.value = val.email;
    input5.value = val.phone;
    input6.value = val.name;
    input9.value = val.id;
    username.value=val.username
}
//编辑确定
const editSure = async () => {
    const { data }: { [propsName: string]: any } = await adminEditApi({
        email: input4.value,
        id: input9.value,
        imageUrl: URL.value,
        name: input6.value,
        password: input7.value,
        password2: input8.value,
        phone: input5.value,
        username: username.value
    })
    if(data.code==0){
        dialogVisible.value = false
        ElMessage({
                message: '修改成功',
                type: 'success',
            })
            render()
    }else if(data.msg){
        ElMessage({
            type: 'error',
            message: data.msg
        })
    }
}
const deladmin = (val) => {
    dialogTableVisible.value = true
    input9.value = val.id;
}
//删除确定
const delSure = async () => {
    const {data}:{[propsName:string]:any}=await adminDelApi(input9.value)
    if(data.code==0){
        ElMessage({
                message: '删除成功',
                type: 'success',
            })
            input9.value=0
            dialogTableVisible.value = false
            render()
    }else if(data.msg){
        ElMessage({
            type: 'error',
            message: data.msg
        })
    }
}
//添加确定
const addSure = async () => {
    if(add5.value!==add6.value){
        return ElMessage({
            type: 'error',
            message: '两次密码输入不一致'
        })
    }
    const { data }: { [propsName: string]: any } = await signUpApi({
        email: add1.value,
        imageUrl: URL.value,
        name: add3.value,
        password: add5.value,
        password2: add6.value,
        phone: add2.value,
        username: add4.value
    })
    if (data.code == 0) {
        dialogVisible2.value=false
        ElMessage({
            type: 'success',
            message: '添加成功'
        })
        AdminData.length=0
        render()
    }else if(data.msg){
        ElMessage({
            type: 'error',
            message: data.msg
        })
    }
}
let editData=reactive([])
const editAddadmin=async(val)=>{
    const { data } = await rolecont(1, 30, '')
    editData.length = 0
    data.data.forEach((v)=>{
        editData.push(v.id)
    })
    const datas  = await adminUpdataApi({adminId:val.id,roleIds:editData})
    if(datas.data.code==0){
        ElMessage({
            type: 'success',
            message: '分配权限成功'
        })
    }else{
        ElMessage({
            type: 'error',
            message: datas.data.msg
        })
    }
}
//渲染
render()
</script>
<template>
    <zlj-header msg="管理员管理"></zlj-header>
    <el-container style="background-color: #f5f7fa;padding:0 ;">
        <el-main style="margin:1rem 1rem 0 1rem;background-color: rgb(255, 255, 255);">
            <div class="pick">
                <h4>数据筛选</h4>
                <div class="pick-form">
                    <div>
                        <el-form :inline="true" :model="adminInfo" class="demo-form-inline">
                            <el-form-item label="输入查询：">
                                <el-input v-model="adminInfo" placeholder="角色名" clearable style="width: 14rem;" />
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="adminSeach">搜索</el-button>
                                <el-button type="primary" @click="dialogVisible2 = true">添加角色</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                    <div>
                    </div>
                </div>
            </div>
            <!-- 表格 -->
            <div class="zlj-table">
                <el-table ref="multipleTableRef"
                    :data="AdminData.slice((currentPage4 - 1) * pageSize4, currentPage4 * pageSize4)" border stripe
                    style="width: 100%" @selection-change="handleSelectionChange">
                    <el-table-column property="id" label="序号" />
                    <el-table-column property="username" label="账号名">
                    </el-table-column>
                    <el-table-column property="phone" label="电话" />
                    <el-table-column property="createTime" label="创建时间" />
                    <el-table-column label="操作">
                        <template #default="scope">
                            <el-button link type="success" size="small" style="padding: 0;"
                                @click="editadmin(scope.row)">编辑</el-button>
                            <el-button link type="success" size="small" style="padding: 0;"
                                @click="editAddadmin(scope.row)">分配权限</el-button>
                            <el-button link type="success" size="small" style="padding: 0;"
                                @click="deladmin(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <!-- 分页 -->
            <div class="demo-pagination-block">
                <el-config-provider>
                    <el-pagination v-model:current-page="currentPage4" :page-size="pageSize4" :page-sizes="[5, 10, 15, 20]"
                        :default-page-size="5" :small="small" :disabled="disabled" :background="background"
                        layout="total, sizes, prev, pager, next, jumper" :total="AdminData.length"
                        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
                </el-config-provider>
            </div>
        </el-main>
    </el-container>
    <!-- 编辑弹框 -->
    <el-dialog v-model="dialogVisible" title="管理员编辑" width="30%" class="editadmin">
        <el-input v-model="input4" placeholder="请输入email" class="zlj-int"><template #prefix>
                <el-icon class="el-input__icon">
                    <Message />
                </el-icon>
            </template></el-input>
        <el-input v-model="input5" placeholder="请输入手机号码" class="zlj-int" :prefix-icon="Phone">
        </el-input>
        <el-input v-model="URL" placeholder="请输入头像地址" class="zlj-int" :prefix-icon="UserFilled">
        </el-input>
        <el-input v-model="input6" placeholder="请输入昵称" class="zlj-int" :prefix-icon="User" />
        <el-input v-model="username" placeholder="请输入账号" class="zlj-int" :prefix-icon="UserFilled">
        </el-input>
        <el-input v-model="input7" type="password" class="zlj-int" placeholder="请输入密码,必须含有大小写字母" show-password
            :prefix-icon="Lock">
        </el-input>
        <el-input v-model="input8" type="password" class="zlj-int" placeholder="请再次确认密码" show-password :prefix-icon="Lock">
        </el-input>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="editSure">提交</el-button>
            </span>
        </template>
    </el-dialog>
    <!-- 删除弹框 -->
    <el-dialog v-model="dialogTableVisible" title="删除账号">
        <p>确定删除吗</p>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogTableVisible = false">取消</el-button>
                <el-button type="primary" @click="delSure">确定</el-button>
            </span>
        </template>
    </el-dialog>
    <!-- 添加弹框 -->
    <el-dialog v-model="dialogVisible2" title="角色添加" width="30%" class="editadmin">
        <el-input v-model="add1" placeholder="请输入email" class="zlj-int"><template #prefix>
                <el-icon class="el-input__icon">
                    <Message />
                </el-icon>
            </template></el-input>
        <el-input v-model="add2" placeholder="请输入手机号码" class="zlj-int" :prefix-icon="Phone">
        </el-input>
        <el-input v-model="URL" placeholder="请输入头像地址" class="zlj-int" :prefix-icon="UserFilled">
        </el-input>
        <el-input v-model="add3" placeholder="请输入昵称" class="zlj-int" :prefix-icon="User" />
        <el-input v-model="add4" placeholder="请输入账号" class="zlj-int" :prefix-icon="UserFilled">
        </el-input>
        <el-input v-model="add5" type="password" class="zlj-int" placeholder="请输入密码,必须含有大小写字母" show-password
            :prefix-icon="Lock">
        </el-input>
        <el-input v-model="add6" type="password" class="zlj-int" placeholder="请再次确认密码" show-password :prefix-icon="Lock">
        </el-input>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible2 = false">取消</el-button>
                <el-button type="primary" @click="addSure">提交</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<style scoped lang="less">
.zlj-btn2 {
    margin: 1rem;
}

.el-main {
    padding: 0;
    position: relative;

    .state {
        width: 8rem;
    }

    .demo-date-picker {
        display: flex;
        width: 100%;
        padding: 0;
        flex-wrap: wrap;
    }

    .demo-date-picker .block {
        text-align: center;
        border-right: solid 1px var(--el-border-color);
        flex: 1;
    }

    .demo-date-picker .block:last-child {
        border-right: none;
    }

    .demo-date-picker .demonstration {
        display: block;
        color: var(--el-text-color-secondary);
        font-size: 14px;
        margin-bottom: 20px;
    }
}

.pick {
    border: 1px solid #ccc;
    margin: 0 1rem 0 1rem;

    .el-form--inline .el-form-item {
        margin-right: 10px;
        margin-left: 10px;
    }

    .el-form-item__label {
        padding: 0;
    }

    h4 {
        padding-left: 10px;
        font-size: 18px;
        margin: 8px 0;
    }
}

.is-selected {
    color: #1989fa;
}
</style>
<style lang="less">
.el-table .cell {
    padding: 0;
}

.cell {
    text-align: center;

    .el-checkbox {
        margin-left: 1.2rem;
    }
}

.demo-pagination-block {
    //分页样式
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin: 1rem;

    .el-pager li:hover {
        color: rgb(26, 188, 156);
    }

    li.is-active {
        color: rgb(26, 188, 156)
    }
}

.el-date-editor .el-range-input {
    padding: 0;
}

.el-input_wrapper {
    width: 5rem;
}

.el-dialog__header {
    background-color: rgba(242, 242, 242, 1);
    margin: 0;
    line-height: 30px;
}

.editadmin {
    .el-input__wrapper {
        margin-bottom: 10px;
    }
}
</style>